<template>
	<view class="content tabs">
		<div class="uni-padding-wrap uni-common-mt card-list">
			<view class="card-tab">

				<div class="card-row-one">

					<view class="first_line">
						<text class="first_line_text margin-r">卡号/日期</text>
						<text class="first_line_text margin-r">面额/金额</text>
					</view>
					<view class="contenter">
						<view class="list_content">
							<view v-for="m in accordion" :key="m.id" title="123" class="list_item" >
								<div>
									<div style="text-align: left;">{{m.cardNumber}}</div>
									<div class="font-grey">{{m.insertTimeDate}}</div>
								</div>
								<div  v-if="m.price!=null&&m.price!=''">
									<div style="text-align: left;"> {{m.nickName}}</div>
									<div class="font-grey">付款方式:{{m.dictTransactionMothodName}}</div>
								</div>
								<div style="margin-right: 40px;" v-if="m.price!=null&&m.price!=''">
									<div style="font-weight: bold;text-align: right;">面额:{{m.price}}元</div>
									<div class="font-grey">{{m.payAmount}}</div>
								</div>
							</view>
						</view>
					</view>
				</div>
			</view>
		</div>
	</view>
</template>

<script>
	import sdSegmentedControl from '@/components/sd-segmented-control/uni-segmented-control.vue'
	import sdCollapse from '@/components/sd-collapse/uni-collapse.vue'
	import sdCollapseItem from '@/components/sd-collapse-item/uni-collapse-item.vue'
	export default {
		components: {
			sdCollapse,
			sdCollapseItem,
			sdSegmentedControl
		},
		data() {
			return {
				//卡数据url
				recordsList: '/card-balance-records/list',
				loadMoreText: "加载中...",
				showLoadMore: true,
				animationData: null,
				page: {
					size: 10,
					current: 1
				},
				timerList: [],
				accordion: [{
					cardNumber: '努力加载中·····',
					insertTimeDate: '',
					setMealName: ''
				}],
				cardId:null
			};
		},
		onUnload() {
			this.page = {
				size: 10,
				current: 1
			}
			this.accordion = []
			this.showLoadMore = false;
		},
		onReachBottom() {
			this.showLoadMore = true;
			this.page.current++
			setTimeout(() => {
				this.initData();
			}, 300);
		},
		onPullDownRefresh() {
			this.page = {
				size: 10,
				current: 1
			}
			this.accordion = []
			this.initData();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad(option) {
			if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
		　　		WeixinJSBridge.invoke('setFontSizeCallback', {
			　　		'fontSize': 0
			　　});
			　　// 重写设置网页字体大小的事件
			　　WeixinJSBridge.on('menu:setfont', function () {
			　　　　WeixinJSBridge.invoke('setFontSizeCallback', {
			　　　　　　'fontSize': 0
			　　　　});
			　　});
			　
			};
			this.cardId = option.cardId
			this.initData();
			
		},

		methods: {
			initData() {
				this.$req.userRecharge(this.recordsList, {
						page: this.page,
						cardId: this.cardId
					})
					.then(v => {
						if (this.page.current == 1) {
							this.accordion = []
						}
						if (v.data.records.length != 0) {
							v.data.records.forEach(obj => {
								let order = {}
								order.cardNumber = obj.cardNumber
								order.insertTimeDate = obj.insertTimeDate
								order.setMealName = obj.setMealName
								if(obj.dictStatus=='BALANCE_PAY'){
									order.payAmount = "余额购买套餐"
								}else{
									order.payAmount = "付款金额:"+obj.payAmount+"元"
								}
								
								order.price = obj.price
								order.nickName = obj.nickName
								order.id = obj.id
								order.dictTransactionMothodName = obj.dictTransactionMothodName
								this.accordion.push(order)
							})
						} else if (this.page.current == 1) {
							this.accordion.push({
								cardNumber: '暂无充值记录！',
								insertTimeDate: '',
								setMealName: ''
							})
							uni.stopPullDownRefresh()
						}
					})
			},
		}
	};
</script>
<style lang="scss">
	@import '@/uni.scss';

	.contenter {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.tabs {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #ffffff;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
	}

	.scroll-h {
		width: 750rpx;
		height: 80rpx;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
		/* flex-wrap: nowrap; */
		/* border-color: #cccccc;
		border-bottom-style: solid;
		border-bottom-width: 1px; */
	}

	.line-h {
		height: 1rpx;
		background-color: #cccccc;
	}

	.uni-tab-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		flex-wrap: nowrap;
		padding-left: 34rpx;
		padding-right: 34rpx;
	}

	.uni-tab-item-title {
		color: #555;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item-title-active {
		color: #007AFF;
	}

	.text {
		margin: 16rpx 0;
		width: 100%;
		background-color: #fff;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #555;
		border-radius: 8rpx;
	}

	.content {
		text-align: center;
		/* height: 400upx; */
		background-color: $theme-color !important;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	.card-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.card-tab {
		position: relative;
		background-color: #FFFFFF;
		width: 90%;
		border-radius: 5px;
		margin-top: 25upx;
		overflow: hidden;
		// padding: 20upx;
	}

	.card-row-one {
		display: flex;
		flex-direction: column;
		font-size: small;

		// justify-content: space-between;
		.first_line {
			width: 100%;
			height: 100rpx;
			position: relative;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			justify-items: center;
			align-items: center;
			padding-left: 10px;

		}

		.first_line_text {
			// position: absolute;
			// left: 40rpx;
			// top: 50%;
			// margin-top: -20rpx;
			width: 80px;
			height: 24px;
			line-height: 24px;
			background-color: #78a8f2;
			border-radius: 8rpx;
			color: #FFFFFF;
			letter-spacing: 4rpx;
			text-align: center;
		}
	}


	.card-number {
		display: flex;
		color: $font-bule-color;
		margin-left: 10px;
		font-weight: bold;
		letter-spacing: 2upx;
		width: 75%;
	}

	.card-status {
		border-radius: 8px;
		height: 36upx;
		color: white;
		width: 180upx;
		margin-right: 0px;

		display: flex;
		justify-content: center;
		align-items: center;

	}





	.card-row-tow {
		display: flex;
		justify-content: space-between;
		margin-top: 5px;

		.card-four-number {
			font-size: 35upx;
			text-align: left;
		}

		.card-mb {
			display: flex;
			flex-direction: column;

		}

		.card-four-font {
			color: $font-grey-color;
			font-size: small;
			text-align: left;
		}
	}

	.card-row-three {
		display: flex;
		justify-content: space-between;
		margin-top: 5upx;

		.three-balance {
			font-size: medium;
		}

		.recharge-button {
			font-size: small;
			width: 120upx;
			background-color: $theme-color;
			color: white;
			border-radius: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.card-row-four {
		position: relative;
		width: 100%;
		height: 105upx;
		display: flex;
		align-items: center;

		.four-left {
			font-size: small;
			position: absolute;
			left: 0px;
			width: 240upx;
			text-align: left;



		}

		.four-right {
			display: flex;
			position: absolute;
			right: 0px;
			font-size: 20upx;

			color: $theme-color;
		}

		.four-btn {
			margin-left: 28px;

		}

		.btn-size {
			font-size: 21px;
		}

		.btn-color {

			color: $theme-color;


		}

		.btn-blue {
			color: #007AFF !important;

		}
	}

	.card-row-five {
		display: flex;
		justify-content: flex-end;
		margin-top: 5px;

		uni-button {

			margin-right: 0px;
			margin-left: 10px;

		}
	}

	.card-btn {
		border-radius: 8px;
		height: 35upx;

		color: #646464;
		padding-left: 10px;
		padding-right: 10px;
		font-size: small;
		border: 1px solid $font-grey-color;
	}

	.card-recharge-btn {

		@extend .card-btn;
		border: 1px solid $font-bule-color !important;
		color: $font-bule-color !important;
	}

	.card-detail {
		background-color: #ffa648 !important;
		border: 1px solid #ffa648 !important;
		color: white !important;
	}

	.card-copy {
		background-color: #0ac083 !important;
		border: 1px solid #0ac083 !important;
		color: white !important;
	}

	.card-order {
		background-color: #f04806 !important;
		border: 1px solid #f04806 !important;
		color: white !important;

	}

	.line {
		background-color: #f2f2f2;
		height: 1px;
	}

	.ininer-line {
		background-color: $theme-color;
		position: absolute;
		width: 50%;
		height: 1px
	}

	.list_content {
		width: 100%;
	}

	.list_item {
		width: 100%;
		height: 58px;
		line-height: 24px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		justify-items: center;
		align-items: center;
		padding-left: 10px;
		padding-top: 4px;
	}

	.list_item:nth-child(odd) {
		background-color: #eef5ff;
	}

	.margin-l {
		margin-left: 40rpx;
	}

	.margin-r {
		margin-right: 40rpx;
	}

	.pading-l {
		pading-left: 40rpx;
	}

	.pading-r {
		pading-right: 40rpx;
	}

	.deatil-icon {
		position: absolute;
		right: 2px;
		color: $theme-color;
	}
</style>
